<template>
	<view class="page">
		<!-- 是否使用页面滚动   use-page-scroll   -->
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList" >
			<view slot="top">
				<view class="" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fclub0.autoimg.cn%2Falbum%2Fuserphotos%2F2013%2F6%2F25%2F4ef4c3d8-83da-47b7-bede-389fb72ca99b.gif&refer=http%3A%2F%2Fclub0.autoimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626420472&t=4436f0522a5814b54bcdbe9bb015b468');height: 400rpx;">
					<cu-custom :isBack="true"
						:bgImage="''"
						:backColor="'text-white'">
						<block slot="backText">
							<view class="text-white">
								排行榜
							</view>
						</block>
					</cu-custom>
				</view>
				<view class="margin-top"></view>
				<van-tabs type="card" swipeable animated color="#aabfd5" :active="active" @change="onChange">
					<van-tab :title="item1" v-for="(item1,index1) in ['剧本热度榜','积分排行榜','主持人热度榜']"
						:key="index1"></van-tab>
				</van-tabs>
			</view>
			<view  class="light padding-lr-xs" style="width: 95%;margin: 20rpx auto 0;">
				<view class="flex justify-center margin-top-xl padding-top-sm">
					<view class="grrj bg-white radius margin-lr-sm padding-sm  margin-top-sm" v-if="dataList.length<2&&dataList.length!=0">
						<view>
							<image src="" mode=""></image>
						</view>
						<view></view>
						<view class="test-sm"><text class="text-bold"></text></view>
					</view>
					<view class="grrj bg-white margin-lr-sm padding-sm shadow" v-for="(item,index) in dataList" v-if="index<3"
						:key="index" :class="{'margin-top-sm':index!=1}" style="border-radius: 12rpx;" @click="goPage(item.id)">
						<view>
							<image :src="$isHttp(item.picture)" mode=""></image>
						</view>
						<view class="text-cut" style="width: 150rpx;height: 38rpx;">{{item.name}}</view>
						<view class="flex-box justify-end">
							<text class="text-red" :class="{'cuIcon-hotfill':active!==1?true:false}"></text>
							<text class="text-bold">{{active==0?item.count_played:active==1?item.total_score+'分':item.total_score}}</text>
						</view>
						<image class="pm1" v-if="index==1 || dataList.length==1" src="../../static/icon/pm1.png" mode=""></image>
						<image class="pm1" v-if="index==0 && dataList.length!=1" src="../../static/icon/pm2.png" mode=""></image>
						<image class="pm1" v-if="index==2" src="../../static/icon/pm3.png" mode=""></image>
					</view>
					<view class="grrj bg-white radius margin-lr-sm padding-sm  margin-top-sm" v-if="dataList.length<3&&dataList.length!=0">
						<view>
							<image src="" mode=""></image>
						</view>
						<view></view>
						<view class="test-sm"><text class="text-bold"></text></view>
					</view>
				</view>
				<view class="flex justify-between align-center list padding-lr-sm padding-tb-xs margin-top-sm"
					v-for="(item,index) in dataList" :key="index" v-if="index>2" @click="goPage(item.id)">
					<view class="flex justify-start align-center">
						<view class="margin-right-sm" style="width: 30rpx;">{{index+1}}</view>
						<view class="margin-right-sm">
							<image :src="$isHttp(item.picture)" mode=""></image>
						</view>
						<view class="text-cut" style="width: 320rpx;height: 38rpx;">{{item.name}}</view>
					</view>
					<view class="flex-box justify-end">
						<text class="text-red" :class="{'cuIcon-hotfill':active!==1?true:false}"></text>
						<text class="text-bold">{{active==0?item.count_played:active==1?item.total_score+'分':item.total_score}}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		mixins: [ZPagingMixin],
		data() {
			return {
				active: 0,
				dataList: [],
			};
		},
		
		methods: {
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				this.$u.api.RankList({
					select : this.active+1,
					page : pageNo,
					number :pageSize
				}).then(res => {
					this.$refs.paging.complete(res.data);
				})
			},
			onChange(event) {
				this.active=event.detail.index
				this.$refs.paging.reload()
			},
			goPage(id){
				if(this.active===0){
					this.$goPage('/pageB/script/info?id='+id)
				}else if(this.active===1){
					
				}else if(this.active===2){
					this.$goPage('/pageB/business/hostInfo?id='+id)
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.grrj {
		width: 190rpx;
		height: 295rpx;
		text-align: center;
		position: relative;
		image {
			width: 120rpx;
			height: 180rpx;
			border-radius: 10rpx;
		}
		.pm1{
			position: absolute;
			left: -20rpx;
			top: -24rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}

	.list {
		// width: 750rpx;
		height: 122rpx;
		background-color: #fff;
		border-radius: 10rpx;

		image {
			width: 75rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
	}

	.page {
		background-color: #fff;
	}
</style>
